<template>
  <div className="dashboard-editor-container">
    <el-row :gutter="20" class="row-1">
      <panel-group @handleSetLineOperate="SetLineOperate"
                   @handleSetBarItem="SetBarItem"
                   @handleSetPieItemType="SetPieItemType"
                   @handleSetBarOutWarehouse="SetBarOutWarehouse"/>
    </el-row>
    <el-row class="row-2">
        <el-row style="position: relative">
          <el-col :span="14" >
            <div style="margin:15px">
              <bar-chart :chartData="barItem" :title="'库存统计'"/> 
            </div>
          </el-col>
          <el-col :span="10">
              <div>
                  <pie-chart :chartData="pieItemType" :height="'310px'" :title="'类型统计'"/>  
              </div>
          </el-col>
        </el-row>
        <el-row style="position: relative">
          <el-col :span="14" >
              <div style="margin-left:15px;padding-right:5px">
                <line-chart :chartData="lineOperate" :title="'损耗统计'" />  
              </div>
              
          </el-col>
          <el-col :span="10">
            <div>
                <bar-chart :chartData="barOutWarehouse" :title="'使用频率统计'"/>  
            </div>
           
          </el-col>
        </el-row>        
    </el-row>
  </div>
</template>

<script>
// 面板组
import PanelGroup from '@/views/dashboard/PanelGroup'
// 折线图
import LineChart from '@/views/dashboard/LineChart'
// 饼状图
import PieChart from '@/views/dashboard/PieChart'
// 条形图
import BarChart from '@/views/dashboard/BarChart'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      /** 折线图 */
      lineOperate:null,
      barItem:null,
      pieItemType:null,
      barOutWarehouse:null,
    }
  },
  created() {
  },
  methods: {
    SetLineOperate(lineOperate) {
      this.lineOperate = lineOperate;
    },
    SetBarItem(barItem){
      this.barItem = barItem;
    },
    SetPieItemType(pieItemType){
      this.pieItemType = pieItemType
    },
    SetBarOutWarehouse(barOutWarehouse){
      this.barOutWarehouse = barOutWarehouse
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .card {
    margin-bottom: 5px;
  }
  .row-1 {
      padding:16px;
  }
  .row-2 {
      background:#fff; 
      padding:16px 16px 0; 
      margin-top: 5px;
      margin-bottom:28px;
  }
  .row-3{
     padding: 15px;
  }

}


@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

